<template>
	<view class="form-item_text" :class="detail ? 'is-disabled' : ''">
		<view class="wrap">
			<view class="form-item_input-wrap">
				<input v-model="inputValue" class="form-item_input" :type="type" :placeholder="placeholder" placeholder-class="phcolor" @focus="inputFocus" :disabled="detail" @blur="inputBlur">
				<view v-if="isShowClear" class="form-item_icon form-item_icon-circle-close" @click.capture="clear">
					<text class="iconfont ">&#xed4e;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'FormItemText',
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [String, Number]
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			detail: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			inputValue: {
				get() {
					return this.value;
				},
				set(value) {
					this.$emit('change', value);
				}
			}
		},
		data() {
			return {
				isShowClear: false
			}
		},
		methods: {
			inputFocus(e) {
				this.isShowClear = true
			},
			inputBlur() {
				this.isShowClear = false
			},
			clear() {
				this.$emit('change', '')
			}
		}
	}
</script>
<style scoped lang="scss">
	.form-item_text {
		width: 100%;
		height: 100%;

		&.is-disabled {

			.wrap {
				.form-item_input-wrap {

					.form-item_input {
						border: none;
						color: #606266;
						background-color: #fff;
						padding-left: 0;
					}
				}

			}
		}

		.wrap {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 8rpx;


			.form-item_input-wrap {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				position: relative;

				.form-item_input {
					font-size: 26rpx;
					width: 100%;
					min-height: 64rpx;
					line-height: 64rpx;
					padding-left: 30rpx;
					padding-right: 50rpx;
					border: 2rpx solid #dcdfe6;
					color: #606266;
					box-sizing: border-box;

					&:focus {
						border: 2rpx solid $u-type-primary;
					}
				}

				.form-item_icon-circle-close {
					position: absolute;
					right: 10rpx;
					z-index: 999999;
					width: 60rpx;
				}
			}
		}
	}
</style>